import React, { Component } from 'react';
import moment from 'moment';
import 'moment/locale/zh-cn'
import { Select, DatePicker } from 'antd';
moment.locale('zh-cn');
const { MonthPicker } = DatePicker;
const { Option } = Select;

class TimeSwitch extends Component {

  constructor(props) {
    super(props);
    // 获取时间
    const year = new Date().getFullYear();
    const month = new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1);
    const day = new Date().getDate() >= 10 ? new Date().getDate() : '0' + new Date().getDate();
    this.state = {
      selectTime: '年',
      defaultMonth: `${year}-${month}`,
      defaultDay: `${year}-${month}-${day}`,
    }
  }

  // 年/月/日 切换
  handleChange = (value) => {
    this.setState({ selectTime: value });
  }

  // 选择时间
  handleTimeValueChange = () => {

  }

  // 年份选择框
  getYearComp = () => {
    const nowYear = moment().year();
    const yearData = Array(10).fill(0).map((item, index) => `${nowYear - index}`);
    const containerStyle = { display: 'inline-block' };
    const style = { width: 150 };
    return (
      <div style={containerStyle}>
        <Select defaultValue={moment().year()} style={style}>
          {
            yearData.map(item => <Option key={item} value={item}>{item}</Option>)
          }
        </Select>
      </div>
    );
  }

  handleChangeMonth = (date, dateString) => {
    this.setState({
      chooseMonth: date
    })
  }

  // 月份选择框
  getMonthComp = () => {
    const { defaultMonth } = this.state;
    const containerStyle = { display: 'inline-block' };
    const style = { width: 150 };
    return (
      <div style={containerStyle}>
        <MonthPicker onChange={this.handleChangeMonth} value={this.state.chooseMonth || moment(defaultMonth)} style={style} />
      </div>
    );
  }

  // 日期选择框
  getDayComp = () => {
    const { defaultDay } = this.state;
    return (
      <DatePicker value={moment(defaultDay)} style={{ width: 150 }} />
    )
  }

  // 时间框组件
  TimeSwitchComp = () => {
    const { selectTime } = this.state;
    let TimeComp = null;
    switch (selectTime) {
      case '年':
        TimeComp = this.getYearComp();
        break;
      case '月':
        TimeComp = this.getMonthComp();
        break;
      case '日':
        TimeComp = this.getDayComp();
        break;
      default:
        break;
    }
    return (
      TimeComp
    )
  }

  render() {
    const { options } = this.props;
    return (
      <div>
        <Select defaultValue={options[0]} style={{ width: 70 }} onChange={this.handleChange}>
          {options.map(x => {
            return <Option key={x} value={x}>{x}</Option>
          })}
        </Select>
        <span style={{ paddingLeft: '10px' }}>选择时间：</span>
        {this.TimeSwitchComp()}
      </div>
    );
  }
}

export default TimeSwitch;
